<template>
  <div id="login">
    <div class="bodybg">
      <img style="display: block;" src="/img/dlbg.png">
      <img class="dot" src="/img/dlkbg.png">
    </div>
    <div class="imgh">
      <img src="/img/dl_logo.png">
    </div>
    <div class="login_ck">

      <div class="inp_center">
        <div class="inp_title" style="padding-bottom: 20px;">欢迎用户登录</div>
        <div class="inpwk">
          <el-input v-model="loginform.username" class="w_wh" size="large"  placeholder="请输入账号" :prefix-icon="User" />
        </div>
        <div class="inpwk">
          <el-input v-model="loginform.password" type="password" class="w_wh" size="large" placeholder="请输入密码"
            :prefix-icon="Lock" />
        </div>
        <div class="login_four_input" style="margin-top: 5px;">
          <el-checkbox v-model="rememberme" label="记住密码" size="large" />
        </div>
        <el-button type="primary" class="login_anni" @click="login()">登录</el-button>
      </div>
    </div>
    <!-- <div class="fhsy"><el-button type="primary" @click="window.location.href =''" size="small" style="padding: 10px;">返回首页</el-button></div> -->
    <footer style="color: #929DAB;position: fixed;bottom: 60px;left: 50%;transform: translate(-50%,0);">
      <span style="margin-right: 40px;">版权所有：河南交通投资集团平顶山分公司</span>
      <span style="margin-right: 40px;">技术支持：景观地理空间信息研究院</span>
    </footer>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const $router = useRouter();
import $sys from '../api/sys';
const loginform = reactive({});
const rememberme = ref(false);
onMounted(() => {
  if (localStorage.getItem("username") || localStorage.getItem("password")) {
    loginform.username = localStorage.getItem("username");
    loginform.password = localStorage.getItem("password");
    rememberme.value = true;
  }
})
document.onkeydown = (e) => {
  if (e.keyCode === 13 && location.href.indexOf("login") !== -1) {
    login();
  }
};
function login() {
  if (checkForm()) {
    $sys.login(loginform).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '登录成功！',
          type: 'success'
        })
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("username", loginform.username);
        localStorage.setItem("role", JSON.stringify(res.data.roles));
        if (rememberme.value) {
          localStorage.setItem("password", loginform.password);
        } else {
          localStorage.removeItem("password");
        }
        $router.push({
          name: 'index'
        })
      } else {
        ElMessage.error(res.message);
      }
    }).catch(err=>{      
        ElMessage({
            message: err.data.message,
            type: 'warning'
          })
      })
  }
}
function checkForm() {
  let flag = false;
  if (loginform.username == '' || !loginform.username) {
    ElMessage({
      message: '用户名不能为空!',
      type: 'warning'
    })
    flag = false;
  } else if (loginform.password == '' || !loginform.password) {
    ElMessage({
      message: '密码不能为空!',
      type: 'warning'
    })
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}
</script>
<style scoped>
.fhsy{ position: absolute; top: 10px; left: 10px;}
body {
  position: relative;
}

.bodybg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.bodybg img {
  width: 100%;
  height: 100%;
}

.bodybg .dot {
  width: 700px;
  height: 40%;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%)
}

.clear {
  clear: both;
}

img {
  display: inline;
}

.login_ck {
  margin: 0 auto;
  width: 416px;
  height: 403px;
  border-radius: 10px;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  background-color: #01142E;
  border: 1px solid #007BF9;
}

.imgh img {
  
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 90px;
}


.el-icon svg {
  font-size: 16px;
  color: #ffffff;
  font-size: 20px;
}

.w_wh {
  margin: 0 auto;
  font-size: 16px;
}

.inp_center {
  width: 70%;
  margin: 0 auto;
}

.inp_center .inp_title {
  color: white;
  text-align: center;
  font-size: 30px;
}

.inpwk {
  margin-top: 17px;
}

.zhongj {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zhongjx1 {
  width: 60%;
  margin-left: 0;
}
</style>
<style lang="less">
#login {
  #login input.el-input__inner:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px #01142e inset !important;
  }

  #login .el-input__wrapper {
    border: 1px #ffffff solid
  }

  .el-input__wrapper {
    background-color: #01142e
  }

  .el-input__prefix {
    color: #ffffff;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    /* 覆盖WebKit内核浏览器自动填充的样式 */
    -webkit-text-fill-color: #2f5282 !important;
    /* 自动填充时的字体颜色 */
  }

  ::-webkit-scrollbar {
    background-color: #031f30;
    width: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(1, 80, 143, 0.6);
    border-radius: 500px;
  }

  .el-input__wrapper {
    border: 1px #2f3f54 solid;
    box-shadow: none;
    border-radius: 3px;
  }

  .w_wh {
    height: 44px;
  }

  .login_anni {
    width: 100%;
    height: 44px;
    margin-top: 5px;
  }

  input.el-input__inner:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px #01142E inset !important;
    color: #f00 !important;
    transition: background-color 5000s ease-in-out 0s;
  }

  .borderless-input {
    border: none;
    outline: none;
    /* 可选，去除焦点时的轮廓 */
  }
  .el-input--large .el-input__inner{ color: #409eff;}
}
</style>